<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<form @submit="formSubmit" v-if="data.order">
					<view class="flex flex-row form-row">
						<view class="flex-grow-0 flex-y-center">
							<view>快递公司</view>
						</view>
						<view class="flex-grow-1" style="padding: 0">
							<view class="flex flex-row" style="height: 100%">
								<view class="flex-grow-1 flex-y-center" style="padding-left: 36upx">
									<input @input="expressInput" disabled="true" name="express" placeholder="请输入快递公司名称" :value="data.order.default_express"></input>
								</view>
								<view class="flex-grow-0" style="min-width: 0">
									<picker @change="expressChange" class="flex-y-center flex-x-center" :range="data.order.express_list" rangeKey="express"
									 style="height: 100%;width: 88upx">
										<image src="../../../static/store/icon-jiantou-xia.png" style="width: 26upx;height: 26upx"></image>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<view class="flex flex-row form-row">
						<view class="flex-grow-0 flex-y-center">
							<view>快递单号</view>
						</view>
						<view class="flex-grow-1">
							<input @input="expressNoInput" name="express_no" placeholder="请输入快递单号" :value="data.order.express_no"></input>
						</view>
					</view>
					<view class="flex flex-row form-row" style="margin-bottom: 88upx">
						<view class="flex-grow-0 flex-y-center">
							<view>商家留言</view>
						</view>
						<view class="flex-grow-1">
							<input @input="wordsInput" name="words" placeholder="选填" :value="data.order.words"></input>
						</view>
					</view>
					<button class="order-item-btn" formType="submit" style="height: 88upx;margin: 0 36upx;background: #ff4544;color: #fff;border-color: #ff4544">提交</button>
				</form>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					order: {}
				},
			};
		},
		onLoad: function (e) {myVue = this;
			myVue.getApp.page.onLoad(this, e);
			var t = this;
			t.getApp.core.showLoading({
				title: "正在加载",
				mask: !0
			}), t.getApp.request({
				url: t.getApp.api.store.order.detail,
				data: {
					id: e.id
				},
				success: function (e) {
					0 == e.code ? t.setData({
						order: e.data.order
					}) : t.getApp.core.showModal({
						title: "提示",
						content: e.msg,
						showCancel: !1,
						success: function (e) {
							e.confirm && t.getApp.core.navigateBack();
						}
					});
				},
				complete: function () {
					t.getApp.core.hideLoading();
				}
			});
		},
		onReady: function () {
			myVue.getApp.page.onReady(this);
		},
		onShow: function () {
			myVue.getApp.page.onShow(this);
		},
		onHide: function () {
			myVue.getApp.page.onHide(this);
		},
		onUnload: function () {
			myVue.getApp.page.onUnload(this);
		},
		onPullDownRefresh: function () {},
		onReachBottom: function () {},
		methods: {
			expressChange: function (e) {
				var t = this;
				t.data.order.default_express = t.data.order.express_list[e.detail.value].express,
					t.setData({
						order: t.data.order
					});
			},
			expressInput: function (e) {
				this.data.order.default_express = e.detail.value;
			},
			expressNoInput: function (e) {
				this.data.order.express_no = e.detail.value;
			},
			wordsInput: function (e) {
				this.data.order.words = e.detail.value;
			},
			formSubmit: function (e) {
				var t = this;
				t.getApp.core.showLoading({
					title: "正在提交",
					mask: !0
				}), t.getApp.request({
					url: t.getApp.api.store.order.send,
					method: "post",
					data: {
						send_type: "express",
						order_id: t.data.order.id,
						express: e.detail.value.express,
						express_no: e.detail.value.express_no,
						words: e.detail.value.words
					},
					success: function (t) {
						t.getApp.core.showModal({
							title: "提示",
							content: t.msg,
							showCancel: !1,
							success: function (e) {
								e.confirm && 0 == t.code && t.getApp.core.redirectTo({
									url: "/store/m/order/order?status=2"
								});
							}
						});
					},
					complete: function (e) {
						t.getApp.core.hideLoading();
					}
				});
			}
		}

	}
</script>

<style scoped>
	.form-row {
		background: #fff;
		border-bottom: 1upx solid #e3e3e3;
		height: 88upx;
	}

	.form-row:first-child {
		border-top: 1upx solid #eee;
	}

	.form-row:last-child {
		border-bottom: 1upx solid #eee;
	}

	.form-row .flex-grow-0 {
		min-width: 200upx;
	}

	.form-row .flex-grow-0>view {
		width: 100%;
		text-align: right;
	}

	.form-row .flex-grow-1 {
		padding: 0 36upx;
	}

	.form-row .flex-grow-1 input {
		height: 100%;
		display: block;
		width: 100%;
	}
</style>